<template>
	<ul class="group-evalute clearfix">
		<li class="group-high-praise">
			<ul>
				<li><img src="../../assets/img/Up@3x.png"></li>
				<li>好评度</li>
				<li class="praise-percentage">{{getBaseMsg.praisePercentage}}</li>
			</ul>
		</li>
		<li class="group-comment">
			<ul>
				<li><img src="../../assets/img/Rightarraw@3x.png"></li>
				<li>{{getBaseMsg.comment}}</li>
			</ul>
		</li>
	</ul>
</template>

<script>
import {mapGetters} from 'vuex'

export default{
	name: 'evaluate',
	computed: {
  	...mapGetters([
      'getBaseMsg'
    ])
  }
}
</script>

<style scoped lang="scss">
	$paddingVertical: 1rem;
	$paddingHorizontal: 1.63rem;
	.group-evalute{
		padding: $paddingVertical $paddingHorizontal .75rem $paddingHorizontal;
		display:-moz-box; 
		display:-webkit-box; 
		display:box;
		border-top: $paddingVertical solid rgb(240, 240,240);
		border-bottom: $paddingVertical solid rgb(240, 240,240);
		font-family: ".PingFang-SC-Regular";
		.group-high-praise{
			-moz-box-flex:3.0; 
			-webkit-box-flex:3.0; 
			box-flex:3.0;
			li{
				float: left;
				margin-right: .5rem;			
				font-size: 1.27rem;
				color: #333;
				letter-spacing: 0;
				line-height: 1.8rem;
			}
			.praise-percentage{
				color: #FF2A0E;
			}
		}
		.group-comment{
			-moz-box-flex:1.0; 
			-webkit-box-flex:1.0; 
			box-flex:1.0;
			li{
				float: right;
				font-size: 1.1rem;
				color: #999;
				letter-spacing: 0;
				line-height: 1.8rem;
				&:first-child{
					margin-left: .5rem;
				};
			}
		}
	}

</style>